<template>
	<!-- 频道内每个视频的列表 -->
	<ul class="channel-video">
		<li class="item" v-for="(item) in video" :key="item.id">
			<div class="video-header">
				<ChannelInfo :info="item"/>
				<ChannelBtn :id="item.id" :count="item.subscribed_count"/>
			</div>
			<Videos :msg="{id: item.id, cover: item.cover, name: item.name}" :videos="item.archives" @handler="handlerVideo"/>
		</li>
	</ul>
</template>

<script>
import ChannelInfo from './ChannelInfo'
import ChannelBtn from './ChannelBtn'
import Videos from '@/components/Public/Video/Videos'

export default{
	name: 'ChannelVideo',
	props:{
		video: {
			type: Array,
			required: true
		}
	},
	methods:{
		handlerVideo(video, msg){
			this.$emit('handlerVideo', video, msg)
		}
	},
	components:{
		ChannelInfo,
		ChannelBtn,
		Videos
	}
}
</script>

<style scoped lang="less">
.channel-video{
	.item{
		margin-bottom: 30px;
		.video-header{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 48px;
		}
	}
}
</style>
